<template>
  <view class="bg-gray-50 w-[750rpx] min-h-screen flex flex-col items-center py-[40rpx] px-[30rpx]">
    <!-- 主卡片容器 -->
    <view class="w-full max-w-[600rpx] bg-white rounded-[25rpx] shadow-lg overflow-hidden">
      <!-- 头部渐变区域 -->
      <view class="bg-gradient-to-r from-green-500 to-teal-400 p-[40rpx] text-white">
        <view class="flex items-center">
          <IconFont name="location" class="text-[40rpx] mr-[20rpx]" />
          <text class="text-[40rpx] font-bold">位置选择工具</text>
        </view>
        <text class="mt-[15rpx] opacity-90 text-[28rpx]">在地图上选择位置，获取经纬度和详细地址</text>
      </view>
      
      <!-- 内容区域 -->
      <view class="p-[40rpx]">
        <!-- 选择位置按钮 -->
        <nut-button
          type="primary"
          size="large"
          class="w-full bg-green-500 border-green-500 py-[30rpx] rounded-[20rpx] text-white font-medium flex items-center justify-center"
          :disabled="!isWechatReady"
          @click="handleSelectLocation"
        >
          <!-- <template #icon>
            <IconFont name="map" class="mr-[15rpx]" />
          </template> -->
          {{ isWechatReady ? '选择位置' : '初始化中...' }}
        </nut-button>
        
        <!-- 结果展示区域 -->
        <view v-if="locationResult" class="mt-[60rpx]">
          <view class="text-[26rpx] text-gray-500 mb-[25rpx] flex items-center">
            <IconFont name="info" class="mr-[15rpx]" />
            <text>选择结果</text>
          </view>
          
          <!-- 结果卡片 -->
          <view class="bg-gray-50 p-[40rpx] rounded-[20rpx] border border-gray-100 result-card">
            <!-- 经纬度 -->
            <view class="mb-[30rpx]">
              <text class="text-[26rpx] font-semibold text-gray-500 mb-[10rpx] block">经纬度</text>
              <text class="text-[36rpx] font-medium text-gray-800">{{ locationResult.coordinates }}</text>
            </view>
            
            <!-- 详细地址 -->
            <view class="mb-[30rpx] pb-[30rpx] border-b border-gray-200">
              <text class="text-[26rpx] font-semibold text-gray-500 mb-[10rpx] block">详细地址</text>
              <text class="text-[28rpx] text-gray-700 leading-relaxed">{{ locationResult.address }}</text>
            </view>
            
            <!-- 操作按钮 -->
            <view class="flex gap-x-[20rpx]">
              <nut-button
                type="default"
                size="normal"
                class="flex-1 border-gray-300 rounded-[15rpx] text-[26rpx] font-medium text-gray-700"
                @click="handleCopyCoordinates"
              >
                <template #icon>
                  <IconFont name="copy" class="mr-[8rpx]" />
                </template>
                复制经纬度
              </nut-button>
              
              <nut-button
                type="default"
                size="normal"
                class="flex-1 border-gray-300 rounded-[15rpx] text-[26rpx] font-medium text-gray-700"
                @click="handleCopyAddress"
              >
                <template #icon>
                  <IconFont name="copy" class="mr-[8rpx]" />
                </template>
                复制地址
              </nut-button>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部提示 -->
      <view class="bg-gray-50 px-[40rpx] py-[30rpx]">
        <text class="text-[24rpx] text-gray-500">提示：请在微信环境中打开此页面以使用位置选择功能</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { useUserStore } from "@/store/user";

const userStore = useUserStore()

/**
 * 位置选择工具页面
 * 基于微信JS-SDK实现地图位置选择功能
 */

// 微信SDK是否准备就绪
const isWechatReady = ref<boolean>(false)

// 位置选择结果
const locationResult = ref<{
  coordinates: string
  address: string
  latitude: number
  longitude: number
} | null>(null)

// 微信配置参数（实际项目中应该从后端获取）
let WX_CONFIG = {
  appId: userStore.wxObj.appId, // 替换为你的微信公众号AppID
  timestamp: userStore.wxObj.timestamp, // 替换为后端生成的timestamp
  nonceStr: userStore.wxObj.nonceStr, // 替换为后端生成的nonceStr
  signature: userStore.wxObj.signature // 替换为后端生成的signature
}

/**
 * 初始化微信JS-SDK
 */
const initWechatSDK = () => {
  try {
    // @ts-ignore
    if (typeof wx !== 'undefined') {
      // @ts-ignore
      wx.config({
        debug: true, // 调试时可改为true
        appId: userStore.wxObj.appId, // 替换为你的微信公众号AppID
        timestamp: userStore.wxObj.timestamp, // 替换为后端生成的timestamp
        nonceStr: userStore.wxObj.nonceStr, // 替换为后端生成的nonceStr
        signature: userStore.wxObj.signature,
        jsApiList: ['openLocation', 'getLocation'] // 需要使用的JS接口列表
      });

      // @ts-ignore
      wx.ready(() => {
        console.log('微信JS-SDK初始化成功');
        isWechatReady.value = true;
        // Taro.showToast({
        //   title: "微信JS-SDK初始化成功",
        //   icon: "success"
        // })
      });

      // @ts-ignore
      wx.error((res: any) => {
        console.error('微信JS-SDK初始化失败:', res);
        // Taro.showToast({
        //   title: '微信SDK初始化失败',
        //   icon: 'none'
        // });
      });
    } else {
      console.warn('非微信环境，无法使用位置选择功能');
      // Taro.showToast({
      //   title: '请在微信环境中使用',
      //   icon: 'none'
      // });
    }
  } catch (error) {
    console.error('初始化微信SDK失败:', error);
    // Taro.showToast({
    //   title: '初始化失败',
    //   icon: 'none'
    // });
  }
}

/**
 * 选择位置
 */
const handleSelectLocation = () => {
  if (!isWechatReady.value) {
    Taro.showToast({
      title: '微信SDK未准备就绪',
      icon: 'none'
    });
    return;
  }

  // @ts-ignore
  if (typeof wx !== 'undefined') {
    // 先获取当前位置作为初始位置
    // @ts-ignore
    wx.getLocation({
      type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
      success: (res: any) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        
        // 打开地图选择位置
        // @ts-ignore
        wx.openLocation({
          latitude: latitude, // 纬度，浮点数
          longitude: longitude, // 经度，浮点数
          name: '初始位置', // 位置名
          address: '拖动地图选择具体位置', // 地址详情说明
          scale: 15, // 地图缩放级别,范围从1~28
          infoUrl: '', // 在查看位置界面底部显示的超链接
          success: (selectedRes: any) => {
            console.log('位置选择成功:', selectedRes);
            handleLocationSelected(selectedRes.latitude, selectedRes.longitude);
          },
          cancel: () => {
            console.log('用户取消了位置选择');
          }
        });
      },
      cancel: () => {
        Taro.showToast({
          title: '需要获取位置权限才能使用此功能',
          icon: 'none'
        });
      }
    });
  } else {
    // 非微信环境，使用模拟数据
    handleLocationSelected(39.9042, 116.4074);
  }
}

/**
 * 处理选择的位置信息
 */
const handleLocationSelected = (latitude: number, longitude: number) => {
  const coordinates = `${longitude.toFixed(6)},${latitude.toFixed(6)}`;
  
  // 设置位置结果
  locationResult.value = {
    coordinates,
    address: '正在获取地址信息...',
    latitude,
    longitude
  };
  
  // 获取详细地址
  getAddressFromCoordinates(longitude, latitude);
}

/**
 * 通过经纬度获取详细地址
 */
const getAddressFromCoordinates = async (longitude: number, latitude: number) => {
  try {
    // 这里应该调用真实的地图API，如高德地图的逆地理编码
    // 目前使用模拟数据
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    if (locationResult.value) {
      locationResult.value.address = '北京市朝阳区光华路8号和乔大厦A座15层';
    }
  } catch (error) {
    console.error('获取地址失败:', error);
    if (locationResult.value) {
      locationResult.value.address = '地址获取失败';
    }
  }
}

/**
 * 复制经纬度
 */
const handleCopyCoordinates = () => {
  if (locationResult.value) {
    Taro.setClipboardData({
      data: locationResult.value.coordinates,
      success: () => {
        Taro.showToast({
          title: '经纬度已复制',
          icon: 'success'
        });
      }
    });
  }
}

/**
 * 复制地址
 */
const handleCopyAddress = () => {
  if (locationResult.value) {
    Taro.setClipboardData({
      data: locationResult.value.address,
      success: () => {
        Taro.showToast({
          title: '地址已复制',
          icon: 'success'
        });
      }
    });
  }
}

// 页面加载时初始化
onMounted(() => {
  initWechatSDK();
});
</script> 